<template>
  <div>
    <div  v-if="jobId == 1">
    <!-- 搜索框 -->
    <el-row>
      <el-col :span="24">
        <el-form :inline="true" style="margin-right: 66%">
          <el-form-item label="姓名">
            <el-input v-model="userName" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="queryUser">查询</el-button>
            <el-button type="primary" @click="addUser">新增</el-button>

          </el-form-item>
        </el-form>
      </el-col>
    </el-row>



    <!-- 表格部分 -->
    <el-row>
      <el-col :span="24">
        <el-table
            :data="userData"
            stripe
            style="width: 100%">
          <el-table-column width="55" align="center">
          </el-table-column>

          <el-table-column
              prop="id"
              v-if="false">
          </el-table-column>
          <el-table-column
              label="序号"
              width="100">
            <template slot-scope="scope">
              {{ scope.$index+1 }}
            </template>
          </el-table-column>
          <el-table-column
              prop="userName"
              label="姓名"
              width="180">
          </el-table-column>
          <el-table-column
              prop="phone"
              label="电话号码"
              width="180">
          </el-table-column>
          <el-table-column
              prop="jobs.jobName"
              label="职务"
              width="180">
          </el-table-column>
          <el-table-column
              label="操作"
              width="300">
            <template slot-scope="scope">
              <el-button type="success" size="mini"  @click="ChangeUser(scope.row)">修改信息</el-button>
              <el-button type="danger" icon="el-icon-delete" @click="open(scope.row)"  circle></el-button>
<!--              <el-button type="text" @click="deleteUser(scope.row)"">点击打开 Message Box</el-button>-->
            </template>

          </el-table-column>
        </el-table>
      </el-col>
    </el-row>



    <el-dialog title="修改用户" :visible.sync="dialogChangeUser" :modal="false">
      <el-form  label-width="80px">

        <el-form-item label="姓名">
          <el-input placeholder="请输入姓名" v-model="users.userName">{{ users.userName }}</el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input  placeholder="请输入电话号码" v-model="users.phone">{{ users.phone }}</el-input>
        </el-form-item>

        <el-form-item label="职务">
          <el-select v-model="users.jobId" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button @click="dialogChangeUser = false">取 消</el-button>
        <el-button type="primary" @click="updateUsers()">确 定</el-button>
      </div>
    </el-dialog>



    <el-dialog title="新增员工" :model="userAdd" :visible.sync="dialogAddUser" :modal="false">
      <el-form >
        <el-form-item label="姓名">
          <el-input placeholder="请输入姓名" v-model="userAdd.userName"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input placeholder="请输入电话" v-model="userAdd.phone"></el-input>
        </el-form-item>
        <el-form-item label="登录账号">
          <el-input placeholder="请输入登录账号" v-model="userAdd.account"></el-input>
        </el-form-item>
        <el-form-item label="职务">
          <el-select v-model="userAdd.jobId" placeholder="请选择职务">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogAddUser = false">取 消</el-button>

        <el-button type="primary" @click="insertUser()">确定</el-button>
      </div>
    </el-dialog>
    </div>

    <!--  无权限界面-->
    <div  v-if="jobId != 1">
      <h1>
        无权限*_*
      </h1>
    </div>

  </div>
</template>

<script>
export default {
    data(){
      return{
        userData:[],
        userName:'',
        jobId:'',
        dialogChangeUser:false,
        dialogAddUser:false,
        dialogBoss:false,
        users:{userName:'',phone:'',jobId:''},
        userAdd:{userName:'',phone:'',account:'',jobId:''},
        options: [{
          value: 1,
          label: '老板'
        }, {
          value: 2,
          label: '运营'
        }, {
          value: 3,
          label: '客服'
        }]

      }
    },
  methods:{
      queryUser(){
        let jwt = localStorage.getItem("jwt");
        this.$axios.get('api/users/queryAllUserByName?userName='+this.userName,
            {headers:{"jwt":jwt}})
            .then(response=>{
              console.log(response.data.data)
              if(response.data.code == 200 ){
                this.userData = response.data.data

              }else{

              }
            })
      },
    open(row) {
      this.$confirm('此操作将永久删除改员工, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let jwt = localStorage.getItem("jwt");
        this.$axios.get('api/users/deleteUserById?id='+row.id,
            {headers:{"jwt":jwt}})
            .then(response=>{
              if(response.data.code == 200 ){
                this.queryUser();

              }else{
                alert("删除失败")
              }
            })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    ChangeUser(row){
      this.dialogChangeUser = true;
      this.users.id = row.id;
      this.users.userName = row.userName;
      this.users.phone = row.phone;
      this.users.jobId = row.jobId
    },
    updateUsers(){
      let jwt = localStorage.getItem("jwt");
      console.log(this.users)
      this.$axios.post('api/users/updateUserAuth',this.users,{headers:{'jwt':jwt}})
          .then(response=>{
            console.log(response.data)
            this.dialogChangeUser = false;
            this.queryUser();
            this.$message({
              message: '修改成功',
              type: 'success'
            });
          })
    },
    addUser(){
      this.dialogAddUser =  true;

    },
    insertUser(){
      let jwt = localStorage.getItem("jwt");
      console.log(this.userAdd)
      this.$axios.post('api/users/addUsers',this.userAdd,{headers:{'jwt':jwt}})
          .then(response=>{
            console.log(response.data)
            this.dialogAddUser = false;
            this.queryUser();
          })
    },


  },
  created(){
    let jwt = localStorage.getItem("jwt");
    let account  = sessionStorage.getItem("account")
    this.$axios.get('api/users/queryJobIdByAccount?account='+account,
        {headers:{"jwt":jwt}})
        .then(response=>{
          console.log(response.data.data.jobId)
          if(response.data.code == 200 ){
            this.jobId = response.data.data.jobId
            this.queryUser();

          }else{

          }
        })

  }
}
</script>

<style scoped>

</style>